<template>
  <div>
      <h1>======学习reactive的属性========</h1>
      <p>
          <span>计算值：{{count1}}</span>
          <span>乘以2：{{count2}}</span>
          <button @click="increat">加</button>
          <button @click="deIncreat">减</button>
      </p>
      
  </div>
</template>

<script>
/* ============reactive的使用=========== */
import {reactive,computed,toRefs} from "vue"
export default {
    setup() {
        const data = reactive({
            count1: 0,
            increat: ()=> {data.count1 += 1},
            deIncreat: ()=> {
                if (data.count1 > 0) {
                    data.count1 -= 1
                }else {
                    alert("不能再减了！！！")
                }
            },
            count2: computed(() => data.count1*2)
        })
        const toRefsData = toRefs(data)
        return {
            ...toRefsData
        }
    }
}
</script>

<style>

</style>